<template>
	<div class="">
		<el-drawer title="JSON" direction="rtl" size="30%;padding: 0px!;" v-model="that.testVisible" @close="onClose">
			<el-divider content-position="left">{{ $t('dang-qian-de-flowdata') }}</el-divider>
			<json-viewer :value="that.flowData" :expand-depth="3" copyable boxed sort theme="my-json-theme" />
			<div style="margin-top: 12px; font-size: 14px">{{ $t('zan-cun') }}</div>
			<el-input v-model="that.flowDataJson" :rows="10" type="textarea" :placeholder="$t('please-input')" />
			<el-divider />
			<!-- <el-button @click="onLoad" style="font-size: 14px">加载</el-button> -->
			<el-button @click="tempSave" :style="{ marginRight: '8px' }" type="primary">{{ $t('zan-cun-0') }}</el-button>
		</el-drawer>
	</div>
</template>

<script setup>
import { reactive, defineEmits, defineExpose } from 'vue';
import { flowConfig } from '../config/args-config.js';
const emits = defineEmits(['clear123', 'loadFlow']);
const that = reactive({
	testVisible: false,
	flowData: null,
	flowDataJson: '',
});

const onClose = () => {
	that.testVisible = false;
	that.flowData = null;
};
const editFlowDataJson = (e) => {
	that.flowDataJson = e.target.value;
};
const tempSave = () => {
	let tempObj = Object.assign({}, that.flowData);
	tempObj.status = flowConfig.flowStatus.SAVE;
	that.flowDataJson = JSON.stringify(tempObj);
};
const clearData = () => {
	emits('clear123', that.flowDataJson);
};
const onLoad = () => {
	clearData();
	setTimeout(() => {
		emits('loadFlow', that.flowDataJson);
		onClose();
	}, 100);
};

defineExpose({
	that,
});
</script>

<style scoped>
:deep(.jv-container .jv-code.boxed) {
	max-height: 200px;
	font-size: 12px;
}
:deep(.jv-my-json-theme .jv-key) {
	color: brown;
	font-size: 12px;
}
:deep(.jv-my-json-theme .jv-string) {
	color: #50a14f;
	font-size: 12px;
}
:deep(.el-drawer__header) {
	margin-bottom: -30px;
	padding: 0 50px;
}
:deep(.el-drawer__body) {
	padding: 0 20px;
}
</style>
